<template>
  <view class="main">
    <nav-bar />
    <view class="info pt-44">
      <div class="title mb-8">你出生的时间</div>
      <DatePicker @on-success="onChooseSuccess">
        <view class="sex_box flex_b_c">
          <view :class="['birth', userInfo.birthday && 'normal' ]">{{ userInfo.birthday || '年 - 月 - 日' }}</view>
          <!-- <input class="birth flex1" disabled :maxlength="10" type="text" v-model="userInfo.birthday" @input="onChangeBirth" placeholder="年 - 月 - 日"> -->
          <!-- <view class="example">如 2000-01-02</view> -->
        </view>
      </DatePicker>
      <!-- <view class="sex_box flex_b_c">
        <input class="birth flex1"  :maxlength="10" type="number" v-model="userInfo.birthday" @input="onChangeBirth" placeholder="年 - 月 - 日">
        <view class="example">如 2000-01-02</view>
      </view> -->
    </view>
    <div class="txt">此刻时间为{{ date.hour}}:{{ date.minute }} - 你认为自己现在<br>是什么心理状态</div>
    <div class="mt-88 flex_center flex_wrap pb-50">
      <view class="animal_list flex_center flex-c" @click="cur = index" v-for="(item, index) in animalList" :key="index">
        <view :class="['animal_box mb-36 flex_center',  cur === index && 'on' ]" >
          <image :src="item.url" class="animal_img"></image>
        </view>
        <view>{{ item.title }}</view>
      </view>
    </div>
    <view class="btn" @click="onNext">下一步</view>
  </view>
</template>
<script>
import DatePicker from '@/components/v2/datePicker.vue'
import { inputBirthday } from '@/mixins/birthday';
import { getNowFormatDate } from '@/utils'
import { postUserUpdate } from '@/api'

export default {
  mixins:[ inputBirthday ],
  components: { DatePicker },
  data() {
    return {
      cur: '',
      date: {},
      userInfo: {},
      animalList: [
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/meizizi.png',
          title: '美滋滋'
        },
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/liekai.png',
          title: '裂开'
        },
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/fadai.png',
          title: '发呆'
        },
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/emo.png',
          title: 'emo'
        },
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/husiluanxiang.png',
          title: '胡思乱想'
        },
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/yuanqimanman.png',
          title: '元气满满'
        },
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/pinbei.png',
          title: '疲惫'
        },
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/kuqi.png',
          title: '哭泣'
        },
        {
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/nanyimiaoshu.png',
          title: '难以描述'
        },
      ]
    }
  },
  created() {
    this.date = getNowFormatDate()
    this.userInfo = this.$storage.getStorage('userInfo')
  },
  methods: {
    async onChooseSuccess(birth_day) {
      const { code, data } = await postUserUpdate({ ...this.userInfo, birth_day })
      if (code === 1000) {
        let info = this.$storage.getStorage('userInfo')
        this.$storage.setStorage('userInfo', { ...info, ...data })
        this.userInfo = data
        console.log(this.userInfo, data, 'shanbao')
        // if (info.nick_name && info.avatar) {
        //   try {
        //     data.astro_id !== '' && this.fnGet(data.astro_id)
        //   } catch (error) {
        //   }
        // }
      }
    },
    onNext() {
      if (this.cur === '') {
        uni.showToast({
          title: '请选择一个心理状态吧',
          icon: 'none'
        })
        return false
      }
       if (this.userInfo.birthday === '') {
        uni.showToast({
          title: '请选择出生日期吧',
          icon: 'none'
        })
        return false
      }
      uni.navigateTo({
        url: '/pages/canvas/index?owned=true'
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: 130rpx;
  background: #FFFFFF;
}
.sex_box {
  height: 76rpx;
  position: relative;
  padding-left: 2rpx;
  padding-right: 26rpx;
  line-height: 76rpx;
  .birth {
    font-family: pf_bold;
    height: 76rpx;
    line-height: 76rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: rgba(0,0,0,.4);
    &.normal {
      color: rgba(0,0,0,1);
    }
    .year {
      width: 80rpx;
    }
  }
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4rpx;
    width: 622rpx;
    height: 4rpx;
    background: #000000;
    border-radius: 22rpx 22rpx 22rpx 22rpx;
  }
  .example {
    font-weight: 400;
    font-size: 24rpx;
    font-family: pf_regular;
    color: #000000;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
.info {
  width: 622rpx;
  margin: 0 auto;
  
}
.title {
  font-weight: 600;
  font-size: 40rpx;
  color: #000000;
  line-height: 47rpx;
}
.txt {
  font-weight: normal;
  font-size: 32rpx;
  color: #000000;
  text-align: center;
  font-style: normal;
 	font-family: pf_bold;
  margin-top: 84rpx;
  line-height: 58rpx;

}
.animal_list {
  width: 208rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;
  line-height: 40rpx;
  margin-bottom: 64rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  .animal_box {
    width: 108rpx;
    height: 108rpx;
    &.on {
      background: url('https://magic.mirror.source.axeastro.com/magic-mirror/rectangle.png') no-repeat left top / cover;
    }
  }
  .animal_img {
    width: 80rpx;
    height: 80rpx;
    display: block;
    border-radius: 80rpx;
  }
}

.btn {
  width: 620rpx;
  height: 96rpx;
  border-radius: 86rpx 86rpx 86rpx 86rpx;
  text-align: center;
  margin: 0 auto;
  background: #000000;
  font-size: 32rpx;
  color: #FFFFFF;
  line-height: 96rpx;
  font-style: normal;
}

</style>